$(document)
	.ready(
		function() {

			// вешаем на кнопку закачки создание спрятанной формы
			// для отправки
			// на послезагрузку вешаем добавление закачанных
			// идентификатор к скрытому полю

			$('body')
				.on(
					'click',
					'div[data-reference-many-file] [data-upload-action]',
					function() {

						var $this = $(this).parents(
							'div[data-reference-many-file]');
						var $button = $(this);

						var bar = $this.find('.upload-bar');
						var wrapper = $this.find('.yec-progress-wrapper');
						var percent = $this.find('.upload-percent');
						var visiblePercent = $this.find('.yec-percent');
						var status = $this.find('.upload-status');

						var $form = $('<form style="visibility: hidden; position: absolute; z-index: -10" enctype="multipart/form-data" '
							+ 'method="post" action="'
							+ $(this).attr('data-upload-action')
							+ '">'
							+ '</form>');
						var $inputFile = $('<input type="file" name="file[]" multiple>');
						$form.append($inputFile);
						$form.appendTo('body');
						$inputFile.trigger('click');

						$form.find('input[type=file]').on('change', function() {
							// проверяем файло по типу и размеру
							var fileList = $form.find('input[type=file]')[0].files;
							var limitAll = $this.attr('data-upload-limit-all');
							var limitOne = $this.attr('data-upload-limit-one');
							var fileCount = fileList['length'];
							var errorWrongType = $this.attr('data-error-wrong-type');
							var errorLimitOne = $this.attr('data-error-limit-one');
							var errorLimitAll = $this.attr('data-error-limit-all');
							var size = 0;
							for (var i = 0; i < fileCount; i++) {
								var error = null;
								if (!fileList[i]['type'].match(/^image/)) {
									error = errorWrongType.replace('xxxFileNamexxx', fileList[i]['name']);
								}
								if (fileList[i]['size'] > limitOne) {
									error = errorLimitOne.replace('xxxFileNamexxx', fileList[i]['name']);
								}
								size += fileList[i]['size'];
								if (size > limitAll) {
									error = errorLimitAll;
								}
								if (null !== error) {
									wrapper.show();
									bar.parent().removeClass('active');
									bar.addClass('progress-bar-danger').parent().hide();
									visiblePercent.addClass('wide-error').html(error);
									$form.remove();
									$button.attr('disabled', null);
									return;
								}
							}
							$form.submit();
						});

						$form
							.ajaxForm({
								dataType : 'json',
								beforeSend : function() {
									bar.parent().addClass('active');
									bar.removeClass('progress-bar-danger');
									bar.removeClass('progress-bar-success');

									$button.attr('disabled', 'disabled');
									wrapper.show();
									status.empty();
									var percentVal = '0%';
									bar.width(percentVal);
									visiblePercent.html(percentVal);
								},
								uploadProgress : function(event, position,
									total, percentComplete) {
									var percentVal = percentComplete + '%';
									bar.width(percentVal);
									visiblePercent.html(percentVal);
								},
								success : function(data) {
									var percentVal = '100%';
									bar.parent().removeClass('active');
									bar.addClass('progress-bar-success');
									bar.width(percentVal);
									visiblePercent.html(percentVal);
									$form.remove();
									$button.attr('disabled', null);
									// добавляем фотки
									var $input = $this
										.find('input[type=hidden]');		
									$input.val($input.val() + ','
										+ data.ids.join(','));
									$input.attr('data-links',$input.attr('data-links')+','+data.links.join(','));
									$input.change();

								},

								error : function(xhr) {

									bar.parent().removeClass('active');
									bar.addClass('progress-bar-danger').parent().hide();
									visiblePercent.addClass('wide-error').html('Error. Try upload file later.');
									$form.remove();
									$button.attr('disabled', null);
								}, complete : function(xhr) {
									status.html(xhr.responseText);
								} });

						return false;
					});

			$('body')
				.on(
					'click',
					'div[data-reference-many-file]  .delete-button[data-delete-id]',
					function() {
						var $this = $(this).parents(
							'div[data-reference-many-file]');
						var $input = $this.find('input[type=hidden]');
						var id = $(this).attr('data-delete-id'),
						url = $(this).attr('data-delete-url');
						$(this).parent().remove();
						$input.val($input.val().replace(id, ''));
						$input.attr('data-links',$input.attr('data-links').replace(url, ''));
						$input.change();
					});

			// вешаем отрисовку списка фоток
			// todo: сделать единое место генерации, сейчас криво (генерится в основном шаблоне)
			$('body')
			.on(
				'change',
				'div[data-reference-many-file] input[type=hidden]',
				function() {
					var arr = $(this).attr('data-links').split(',');
					var ids = $(this).val().split(',');
					var $container = $(this).parent('div[data-reference-many-file]').find('ul[data-thumbs-container]');
					$container.html('');
					var urlPattern = $container.attr('data-thumbs-url-template');
					for (var k = 0; k < arr.length;k++) {
						if(arr[k]!==''){
							var url =  arr[k];//urlPattern.replace('******', arr[k]);
							var str = '<li>'
							+ '<div class="thumb" style="background-image: url(\''+ url +'\')"></div>'
							+ '<div class="delete-button" data-delete-id="'+ids[k]+'" data-delete-url="'+url+'"></div>'
							+ '</li>';
	
							$container.append(str);
						}
					}
				});
		});